<template>
  <div class="main">
    <section>
      <el-form :model="data" ref="baseMsgForm" label-width="120px" class="demo-baseMsgForm">
        <el-form-item label="后台分类:" prop="name">
          <span>{{data.name}}</span>
        </el-form-item>
        <el-form-item label="属性组:" prop="name">
          <div class="">
            <el-button type="primary" @click="chooseCat" plain>选择属性组</el-button>
          </div>
          <div class="marginT">
            <el-table v-loading="listLoading" :data="list" element-loading-text="给我一点时间" border fit highlight-current-row>
              <el-table-column align="left" prop="name" label="属性组名"></el-table-column>
              <el-table-column align="left" prop="description" label="属性描述"></el-table-column>
              <el-table-column align="left" label="操作">
                <template slot-scope="scope">
                  <el-button type="danger" plain @click="unbindComfir(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>

<script>
/**
 * 关联属性组
 */
import { getCatBindAttr, bindCatAttr } from '@/api/goodMiddleStage'
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      list: [],
      listLoading: false
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getList()
    },
    async getList() {
      try {
        const { data } = await getCatBindAttr({ backCatId: this.data.catId })
        this.list = data.goodsAttrGroupList
        console.log(data)
      } catch (error) {
        console.log(error)
      }
    },
    // 解绑二次确认
    async unbindComfir(val) {
      try {
        await this.$confirm(
          '是否要删除当前属性组?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        this.bindOrUnBindAttr(val, 0)
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    // 解绑 or 绑定类目属性组
    async bindOrUnBindAttr(val, type) {
      // type 1绑定， 0 解绑
      try {
        const { message } = await bindCatAttr({
          attrGroupId: val.id,
          backCatId: this.data.catId,
          bingAction: type
        })
        if (message === 'SUCCESS') {
          this.$message.success('操作成功')
          this.getList()
        }
        this.getList()
      } catch (error) {
        this.$message.error('操作失败')
        console.log(error)
      }
    },
    // 选择属性组
    chooseCat() {
      this.goodsMiddleStageCat().then(val => {
        this.bindOrUnBindAttr(val[0], 1)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.marginT {
  margin-top: 20px;
}

.diag_search {
  display: flex;
  align-items: center;
  width: 60%;
  justify-content: space-evenly;
}
</style>